<!doctype html>
<html>
<head>
	<title> test </title>
	<meta charset="utf-8">
	<meta name="Author" content="广州夜界网络科技有限公司">
    <meta name="Keywords" content="酒吧,酒吧行业,酒吧品牌,酒吧服务,酒吧资源,酒吧培训,酒吧联盟,酒吧演艺嘉宾">
    <meta name="Description" content="广州夜界网络科技有限公司是一家专业为夜店娱乐行业提供创新型软件技术开发及应用解决方案的移动互联网公司。夜界网络以“夜界——夜晚的世界”的理念，通过云端计算、移动互联、大数据等近年来互联网取得的创新丰硕成果深度融入到酒吧、KTV、音乐餐吧、茶餐厅、等多个娱乐行业领域，构建新时代娱乐行业全新的工作与生活方式为导向的移动互联公司。">

	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="renderer" content="webkit">
	<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
	<meta name="format-detection" content="telephone=no">
	<meta name="apple-mobile-web-app-status-bar-style" content="black">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<link rel="apple-touch-icon-precomposed" href="apple-touch-icon.png">

	<style>
		body{text-align: center;}
		#canvas{background:#eee;}
	</style>	
</head>

<body>
	<canvas id="canvas" width="600" height="400"></canvas>

	<script>
		//时间段构造函数
		function T(duration){
			//时间段开始计时
			this.start=function(){
				this.startTime=new Date().getTime();
				return this;
			};
			//获取已耗时间与总时间的比值
			this.getT=function(){
				return (new Date().getTime()-this.startTime)/duration;
			};
		}
		//二阶贝塞尔曲线公式
		function b(t,p0,p1,p2){
			return Math.pow(1-t,2)*p0 + 2*t*(1-t)*p1 + Math.pow(t,2)*p2;
		}
		//获取某时刻贝塞尔曲线所在的点
		function getB(t,p0,p1,p2){
			return {
				x:b(t,p0.x,p1.x,p2.x),
				y:b(t,p0.y,p1.y,p2.y)
			};
		}
		//画点
		function dot(ctx,p){
			ctx.fillStyle='#f00';
			ctx.beginPath();
			ctx.arc(p.x,p.y,3,0,2*Math.PI);
			ctx.fill();
			ctx.closePath();
		}
		//画线
		function line(ctx,p0,p1,color){
			ctx.strokeStyle=color||'#00f';
			ctx.beginPath();
			ctx.moveTo(p0.x,p0.y);
			ctx.lineTo(p1.x,p1.y);
			ctx.stroke();
			ctx.closePath();
		}
		//写字
		function text(txt,p,offset){
			ctx.fillStyle='#000';
			offset=offset||{x:0,y:0};
			ctx.font="30px Arial";
			ctx.fillText(txt,p.x+offset.x,p.y+offset.y);
		}
		//画贝塞尔曲线
		function bezier(ctx,p0,p1,p2,duration){
			var t=new T(duration).start();
			var start=p0;
			var loop=function(){
				var bt=t.getT();
				if(bt<=1){
					line(ctx, start, start=getB(bt, p0, p1, p2), '#f00');
					requestAnimationFrame(loop);
				}
			};
			loop();
		}

		/* 入口 */
		//定义三个点
		var p0={x:100,y:300},
			p1={x:300,y:100},
			p2={x:500,y:300};

		//获取绘图上下文
		var ctx=document.getElementById('canvas').getContext('2d');

		//画线p0p1,p1p2
		line(ctx,p0,p1),line(ctx,p1,p2);
		//画点p0,p1,p2
		dot(ctx,p0),dot(ctx,p1),dot(ctx,p2);
		//写字
		text('P0',p0,{x:-20,y:32});
		text('P1',p1,{x:-20,y:-5});
		text('P2',p2,{x:-20,y:32});

		//画贝塞尔曲线
		bezier(ctx,p0,p1,p2,2000);
	</script>
</body>
</html>